<template>
	<div class="pay-dialog">
		<div class="pay-dialog-cover"></div>
		<div class="pay-dialog-content">
      <div  class="pay-dialog-title">
        <p>{{$t('message.newPageAboutPay')}}</p>
      </div>
			<div class="pay-dialog-group">
				<div class="pay-dialog-success">
					<p class="pay-dialog-label">{{$t('message.paySuccessClick')}}</p>
					<div class="pay-dialog-btn">
						<button type="button" class="btn-success" @click="hasCompletePayment">{{$t('message.hasPayed')}}</button>
					</div>
				</div>
				<div class="pay-dialog-fail">
					<p class="pay-dialog-label">{{$t('message.meetQuestionClick')}}</p>
					<div class="pay-dialog-btn">
						<button type="button" class="btn-fail" @click="payAgain">{{$t('message.repay')}}</button>
					</div>
				</div>
			</div>
			<div class="pay-dialog-help">
				<p>{{$t('message.getForHelp')}}<span>02-1054607</span></p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'PayDialog',
  props: {
    gatewayId: {
      type: String,
      default: ''
    },
    gatewayName: {
      type: String,
      default: ''
    },
    orderId: {
      type: String,
      default: ''
    },
    type: {
      type: Number
    }
  },
  methods: {
    hasCompletePayment () {
      this.$ajax.queryPayStatus({
        gateway_order_id: this.gatewayId,
        gateway_name: this.gatewayName
      }).then((res) => {
        if (res.code === 200) {
          if (res.data === 0) {
            if (this.type === 2) {
              this.$router.push({path: `/personal/bill/detail?orderId=${this.orderId}`})
            } else if (this.type === 1) {
              this.$router.push({path: '/personal/order/detail', query: {orderId: this.orderId}})
            }
          } else if (res.data === 1) {
            if (this.type === 2) {
              this.$router.push({path: '/pay/success', query: {type: 'bill'}})
            } else if (this.type === 1) {
              this.$router.push({path: '/pay/success', query: {orderId: this.orderId}})
            }
          }
        } else {
          console.log('请求失败')
        }
      })
    },
    payAgain () {
      this.$emit('on-close')
      location.href = location.href
    }
  }
}
</script>

<style scoped>
.pay-dialog {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
}

.pay-dialog-cover {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
}

.pay-dialog-content {
	width: 600px;
	height: 355px;
	background: #fff;
	position: fixed;
	top: 50%;
	left: 50%;
  transform: translate(-50%,-50%);
	z-index: 6;
}
.pay-dialog-title {
  margin: 60px 0;
  text-align: center;
  font-size: 18px;
  color: #333333;
}

.pay-dialog-group {
	width: 600px;
}

.pay-dialog-success {
  float: left;
  display: inline-block;
	width: 299px;
	height: 89px;
	border-right: 1px solid #ccc;
}

.pay-dialog-label {
  font-size: 14px;
  color: #666666;
	text-align: center;
}

.pay-dialog-btn {
	height: 54px;
	margin-top: 4px;
	text-align: center;
}

.pay-dialog-btn > button {
	width: 160px;
	height: 54px;
  font-size: 16px;
	cursor: pointer;
}

.btn-success {
  color: #FF600A;
  background: #FFFFFF;
  border: 1px solid #FF600A;
}

.btn-fail {
	color: #fff;
  background: #FF600A;
  border: none;
}

.pay-dialog-fail {
  float: left;
  display: inline-block;
	width: 299px;
	height: 86px;
}

.pay-dialog-help {
  clear: both;
	text-align: center;
  font-size: 14px;
  color: #A5A5A5;
  position: relative;
  top: 40px;
}

.pay-dialog-help span {
  padding-left: 8px;
  font-size: 14px;
  color: #A5A5A5;
}
</style>
